<f:view xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html" contentType="text/html"
	xmlns:p="http://primefaces.org/ui">

	<style type="text/css">
body {
	margin: 0;
	padding: 0;
	/* background-color: #333; */
	background-color: #0C0368;
	font-family: Arial, Helvetica, sans-serif;
	color: #FFF;
}

#login_area {
	width: 365px;
	height: 380px;
	margin: 100px auto;
	padding: 25px;
	border: 1px #CCCCCC solid;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	background-color: #fff;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#fff),
		to(#D8D5D5));
	background-image: -webkit-linear-gradient(top, #fff, #D8D5D5);
	background-image: -moz-linear-gradient(top, #fff, #D8D5D5);
	background-image: -ms-linear-gradient(top, #fff, #D8D5D5);
	background-image: -o-linear-gradient(top, #fff, #D8D5D5);
	background-image: linear-gradient(top, #fff, #D8D5D5);
	-webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.2), 0 1px 1px
		rgba(0, 0, 0, .2);
	-moz-box-shadow: 0 0 2px rgba(0, 0, 0, 0.2), 1px 1px 0 rgba(0, 0, 0, .1);
	box-shadow: 0 0 2px rgba(0, 0, 0, 0.2), 0 1px 1px rgba(0, 0, 0, .2)
}

#login_area h1 {
	width: 400px;
	height: 50px;
	color: #8f5a0a;
	font-size: 2em;
	letter-spacing: 2px;
	margin: 0 0 20px;
	position: relative;
	text-align: center;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
	background-color: #ffb94b;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#fddb6f),
		to(#ffb94b));
	background-image: -webkit-linear-gradient(top, #fddb6f, #ffb94b);
	background-image: -moz-linear-gradient(top, #fddb6f, #ffb94b);
	background-image: -ms-linear-gradient(top, #fddb6f, #ffb94b);
	background-image: -o-linear-gradient(top, #fddb6f, #ffb94b);
	background-image: linear-gradient(top, #fddb6f, #ffb94b);
	border-width: 1px;
	border-style: solid;
	border-color: #d69e31 #e3a037 #d5982d #e3a037;
}

label {
	display: block;
	padding: 5px;
	color: #999;
}

fieldset {
	border: 0;
	padding: 0;
	margin: 0;
}

#inputs {
	height: 185px;
}

#inputs input {
	border: 1px solid #CCCCCC;
	border-radius: 5px 5px 5px 5px;
	box-shadow: 0 1px 1px #CCCCCC inset, 0 1px 0 #FFFFFF;
	margin: 0 0 10px;
	outline: medium none;
	padding: 15px 15px 15px 15px;
	width: 353px;
}

#adminPanel div {
	padding-top: 15px;
}

#adminPanel {
	background-color: #C06823;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#F0C487),
		to(#C06823));
	background-image: -webkit-linear-gradient(top, #F0C487, #C06823);
	background-image: -moz-linear-gradient(top, #F0C487, #C06823);
	background-image: -ms-linear-gradient(top, #F0C487, #C06823);
	background-image: -o-linear-gradient(top, #F0C487, #C06823);
	background-image: linear-gradient(top, #F0C487, #C06823);
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
	-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0
		rgba(255, 255, 255, 0.3) inset;
	-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0
		rgba(255, 255, 255, 0.3) inset;
	box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3)
		inset;
	border-width: 1px;
	border-style: solid;
	border-color: #9B7104 #9B7104 #9B7104 #9B7104;
	float: left;
	height: 35px;
	padding: 0;
	width: 120px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #646262;
	font-size: 19px;
	font-weight: bold;
}

#submit,#reset {
	background-color: #091CA7;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#91D2F6),
		to(#091CA7));
	background-image: -webkit-linear-gradient(top, #91D2F6, #091CA7);
	background-image: -moz-linear-gradient(top, #91D2F6, #091CA7);
	background-image: -ms-linear-gradient(top, #91D2F6, #091CA7);
	background-image: -o-linear-gradient(top, #91D2F6, #091CA7);
	background-image: linear-gradient(top, #91D2F6, #091CA7);
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
	-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0
		rgba(255, 255, 255, 0.3) inset;
	-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0
		rgba(255, 255, 255, 0.3) inset;
	box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3)
		inset;
	border-width: 1px;
	border-style: solid;
	border-color: #046A9B #046A9B #046A9B #046A9B;
	float: left;
	height: 35px;
	padding: 0;
	width: 120px;
	cursor: pointer;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: white;
	font-size: 16px;
}

#submit:hover,#submit:focus,#reset:hover,#reset:focus {
	background-color: #91D2F6;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#091CA7),
		to(#91D2F6));
	background-image: -webkit-linear-gradient(top, #091CA7, #91D2F6);
	background-image: -moz-linear-gradient(top, #091CA7, #91D2F6);
	background-image: -ms-linear-gradient(top, #091CA7, #91D2F6);
	background-image: -o-linear-gradient(top, #091CA7, #91D2F6);
	background-image: linear-gradient(top, #091CA7, #91D2F6)
}

#submit:active,#reset:active {
	outline: none;
	-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
	-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset
}

#submit::-moz-focus-inner,#reset::-moz-focus-inner {
	border: none;
}

.w325 {
	width: 325px;
}

.left {
	float: left;
}

.right {
	float: right;
}

.mgrLft15 {
	margin-left: 15px;
}

.carrefourLogo {
	background-image: url("images/logo.jpeg") !important;
}

#forgotPassword {
	margin-top: 25px;
	margin-left: 15px;
}

#forgotPassword a,#forgotPassword a:link,#forgotPassword a:visited,#forgotPassword a:hover,#forgotPassword a:active
	{
	color: #3050CE;
}
</style>
	<form name="loginForm" method="POST" action="j_security_check">
		<div id="login_area">

			<h:panelGroup
				rendered="#{requestScope['javax.servlet.forward.servlet_path'] == '/j_security_check'}">
				<div
					style="width: 350px; height: 25px; text-align: center; color: #B61212; margin-top: 15px; float: left; font-size: 15px;">
					<div>Kullanıcı adı veya şifre hatalı! Lütfen kontrol ediniz!</div>
				</div>
			</h:panelGroup>
			<div style="margin-top: 110px;">
				<fieldset id="inputs">
					<label>Kullanıcı Adı</label> <input id="username" type="text"
						name="j_username" placeholder="Kullanıcı adı" /><br /> <label>Şifre</label>
					<input id="password" type="password" name="j_password"
						placeholder="Şifre" /><br />
				</fieldset>
				<div class="w325 mgrLft15">
					<div class="left">
						<input id="submit" type="submit" value="Giriş" name="submit" />
					</div>
					<div class="right">
						<input id="reset" type="reset" value="Temizle" name="reset" />
					</div>
				</div>
				<!--<div id="forgotPassword" class="left">
					<a href="forgotPassword.jsf">Şifrenizi hatırlamıyorsanız tıklayınız</a>
				</div>-->
			</div>
		</div>


		<!-- div
			style="position: relative; left: 200px; top: 200px; width: 300px; border: 1px solid #000000;">
			<table>
				<tr>
					<td><p>Kullanıcı Adı</p></td>
					<td><input type="text" name="j_username" /></td>
				</tr>
				<tr>
					<td><p>Şifre</p></td>
					<td><input type="password" name="j_password" /></td>
				</tr>
				<tr>
					<td><input type="submit" value="Giriş" /></td>
					<td><input type="reset" value="Temizle" /></td>
				</tr>
			</table>
		</div -->
	</form>
</f:view>
